<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <div class="box" abc="这是html的abc属性" title="这是title"></div>
</body>
<script>
  var box = document.querySelector(".box")
  console.log( box );

  // js的自定义属性
  box.abc = "这是js的abc属性";
  console.log( box.abc );
  // js的内置属性
  console.log( box.children );

  // js属性无论自定义或者内置，都可以使用对象语法进行操作

  // html的内置属性：可以使用对象语法
  console.log( box.title );
  console.log( box.className );

  // html的自定义属性：不能使用对象语法
  console.log( box.abc )
  // html的自定义属性：专属方法
  console.log( box.getAttribute("abc") )
  box.setAttribute("abc", "123123")
  box.setAttribute("qwe", "456456")
  box.removeAttribute("abc")

  console.log( box.getAttribute("class") )
  console.log( box.getAttribute("title") )


</script>
</html>